<!-- 评价菜单 -->
<script setup>
import { ref, reactive, onMounted } from "vue";
import { RouterLink, useRouter } from "vue-router";
const router = useRouter();
// store使用
import { useManageStore } from "@/stores";
const manageStore = useManageStore();
import ManageAPI from "@/api/manage";

import icon_1 from "../assets/images/组 3@2x.png";
import icon_2 from "../assets/images/组 4@2x.png";
import icon_3 from "../assets/images/组 6@2x.png";
import icon_4 from "../assets/images/组 5@2x.png";

const icons = [icon_1, icon_2, icon_3, icon_4];
const title = ref("");

const list = reactive([
  { label: "服务质量评价", path: "/ServiceEvaluation" },
  { label: "执法过程评价", path: "/LawEnforcementEvaluation" },
  { label: "投诉处置评价", path: "/ComplaintEvaluation" },
  { label: "综合问卷", path: "/ComprehensiveEvaluation" },
]);

const handleTo = (item) => {
  router.push(item.path);
};

onMounted(() => {
  ManageAPI.getSetting().then((res) => {
    title.value = res?.data?.sys_name;
    document.title = title.value.replaceAll("监测", "评价");
  });
});
</script>
<template>
  <div class="evaluation">
    <div class="title">
      <span class="title_big">您好！</span>
      <span class="title_small"
        >欢迎使用{{ title.replaceAll("监测", "评价") }}！</span
      >
    </div>
    <div class="evaluation-grid">
      <div
        v-for="(item, index) in list"
        :key="item.label"
        class="evaluation-li"
        @click="handleTo(item)"
      >
        <img :src="icons[index]" alt="" />
        <span class="text">{{ item.label }}</span>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.evaluation {
  width: 100%;
  height: 100%;
  padding: 0 10px;
  background: url("../assets/images/bj@3x.png");
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  .title {
    height: 22%;
    color: #fff;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    &_big {
      font-size: 20px;
    }
    &_small {
      font-size: 12px;
    }
  }
  &-grid {
    flex: 1;
    padding-top: 20px;
    background: url("../assets/images/组 1@3x.png") no-repeat;
    background-color: #fff;
    background-size: 100% auto;
    background-position: bottom;
    border-radius: 40px 40px 0 0;
    text-align: center;
    .el-button {
      width: 100%;
      height: 3rem;
      border-radius: 10px;
      font-size: 1rem;
    }
  }
  &-li {
    width: 165px;
    display: inline-block;
    position: relative;
    text-align: center;
    img {
      width: 100%;
      height: 100%;
    }
    .text {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 25%;
      color: #fff;
    }
  }
}
</style>
